<template>
    <div class="pay-deposit">
        <div class="deposit-title">
            <div class="deposit-title-content">
                <span :class="{'green-white': step1}">资质认证</span>
                <span :class="{'green-white': step2}">交纳押金</span>
                <i :class="{'green-color': step1}">1</i>
                <i :class="{'green-color': step2}">2</i>
            </div>
        </div>
        <!-- 细线 -->
        <div class="deposit-count">
            <ul>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <p><span>699</span>元</p>
        </div>
        <ol class="deposit-way">
            <li class="paybao"><span>支付宝</span><i :class="{'active': paybaoActive}" @click="paybaoActive = ! paybaoActive"></i></li>
            <li class="weixin"><span>微信</span><i :class="{'active': weixinActive}" @click="weixinActive = ! weixinActive"></i></li>
        </ol>
        <button type="button">去支付</button>
    </div>
</template>

<script>
 export default {
    data () {
        return {
            // 第几步
            step1: false,
            step2: true,

            // 支付方式
            paybaoActive: false,
            weixinActive: false,
        }
    }
 }
</script>

<style scoped>
    .deposit-title {
        width: 100%;
        height: 140px;
        padding-top: 30px;
        margin-bottom: 80px;
        background: #fff;
        box-shadow: 0 10px 20px 0 rgba(0,0,0,0.05);
    }
    .deposit-title-content {
        width: 690px;
        height: 80px;
        margin: 0 auto;
        padding: 8px 0 8px 42px;

        position: relative;

        background: #f5f5f5;
        border-radius: 74px;
    }
    .deposit-title-content span {
        display: block;
        float: left;
        width: 332px;
        height: 64px;
        padding-top: 13px;
        padding-left: 50px;
        /*background: #0db95f;*/
        text-align: left;

        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #aaa;
        letter-spacing: 0;
    }
    .deposit-title-content span:last-of-type {
        width: 305px;
        border-radius: 0 34px 34px 0;
    }
    .deposit-title-content .green-white {
        background-color: #0db95f;
        color: #fff;
    }
    .deposit-title-content i {
        display: block;
        width: 68px;
        height: 68px;
        padding-top: 10px;
        text-align: center;
        background: #fff;
        border-radius: 50%;

        position: absolute;
        left: 8px;
        top: 6px;

        font-family: PingFangSC-Regular;
        font-size: 36px;
        color: #aaa;
        letter-spacing: 0;
    }
    .deposit-title-content i:last-of-type {
        left: 340px;
    }
    .deposit-title-content .green-color {
        color: #0db95f;
    }
    .deposit-count {
        padding: 0 50px;
        position: relative;
        margin-bottom: 82.5px;
    }
    .deposit-count li {
        border: 1px solid #D8D8D8;
        margin-bottom: 8px;
    }
    .deposit-count p {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);

        font-family: AvantiBold;
        font-size: 28px;
        color: #696969;
        letter-spacing: 4px;
    }
    .deposit-count p span {
        font-family: PingFangSC-Regular;
        font-size: 72px;
        color: #696969;
        letter-spacing: 1.56px;
    }
    .deposit-way {
        border-top: 1px solid #fafafa;
        font-family: PingFangSC-Regular;
        font-size: 28px;
        color: #696969;
        letter-spacing: 1.2px;
    }
    .deposit-way li {
        width: 100%;
        height: 100px;
        line-height: 100px;
        border-bottom: 1px solid #fafafa;

        background-size: 40px 40px;
        text-align: left;
    }
    .deposit-way span {
        vertical-align: top;
    }
    .deposit-way li:before {
        display: inline-block;
        vertical-align: top;
        content: "";
        width: 48px;
        height: 48px;
        margin: 26px;
        margin-right: 30px;
        background: #ddd url() 0px 0px no-repeat;
    }
    .deposit-way i {
        float: right;
        display: inline-block;
        width: 40px;
        height: 40px;
        margin-top: 30px;
        margin-right: 42px;
        background-color: #ddd;
    }
    .deposit-way .active {
        background: green url() 0 0 no-repeat;
    }
    button {
        width: 690px;
        height: 100px;
        padding-right: 35px;
        color: #fff;
        background: #0db95f url() 396px center no-repeat;
        background-size: 15px 24px;

        position: absolute;
        bottom: 30px;
        right: 30px;

        /*background-color: #0db95f;*/
        border-radius: 50px;

        font-family: PingFangSC-Regular;
        font-size: 32px;
        color: #fff;
        letter-spacing: 0;
    }
</style>
